<template>
  <view class="bottom-bar">
    <view class="bar-content">
      <slot></slot>
    </view>
    <view class="safe-area" :style="{ height: safeAreaHeight + 'px' }"></view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const safeAreaHeight = ref(0)

onMounted(() => {
  // 获取系统信息
  uni.getSystemInfo({
    success: (res) => {
      // 计算底部安全区域高度
      const tabBarHeight = 50 // tabbar的默认高度，可能需要调整
      const bottomSafeArea = res.safeAreaInsets?.bottom || 0
      safeAreaHeight.value = bottomSafeArea
    }
  })
})
</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--window-bottom);
  background-color: $primary-b;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 99;
  border-radius: 6rpx 6rpx 0 0; // 添加上边圆角
  overflow: hidden; // 确保内容不超出圆角范围
}

.bar-content {
  padding: 12px 15px;
}

.safe-area {
  width: 100%;
  background-color: #fff;
}
</style>
